<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="search-input">
                <cube-input v-model="keyword" placeholder="搜科目、老师、课程">
                    <i class="iconfont icon-magnifier" slot="prepend"></i>
                </cube-input>
            </div>
            <div class="search-complete" slot="right">确定</div>
        </nav-bar>
        <div class="search-wrap">
            <cube-scroll-nav :side="true" :data="tabsData" :current="currentKey">
                <cube-scroll-nav-panel v-for="item in tabsData" :key="item.name" :label="item.name" :title="item.name">
                    <div class="search-tab-wrap">
                        <div class="search-tab-item" v-if="item.type === 1"></div>
                    </div>
                </cube-scroll-nav-panel>
            </cube-scroll-nav>


        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import CommonUnit from "@/unit/CommonUnit";


    @Component({
        components: {
            NavBar, FilletCard, ListCell
        }
    })
    export default class Search extends Scene {

        private keyword: string = "";
        private tabsData: any[] = [];
        private currentKey: string = "";

        @State("UserStore")
        private user!: InterfaceUser;

        private back(): void {
            this.navigateBack();
        }

        private mounted() {
            this.getTabListData();
        }

        private async getTabListData(): Promise<any> {
            const gradeListRes = await Http.get(this.api.getGradeList);
            const lessionListRes = await Http.get(this.api.getLessonList);
            const teacherListRes = await Http.get(this.api.getTeacherList, {branchcode: this.user.StudentList[0].br_code});

            const gradeList = gradeListRes.Data;
            const lessionList = lessionListRes.Data;
            const teacherList = teacherListRes.Data;
            this.tabsData = [{name: "年级", type: 1, list: gradeList}, {name: "科目", type: 2, list: lessionList}, {name: "老师", type: 3, list: teacherList}];
            this.currentKey = this.tabsData[0].name;

        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background #fff;

    .search-input
        height 44px;
        width 70vw;
        padding 7px 25px 7px 0;

        >>> .cube-input
            border-radius 30px;
            overflow: hidden;


        >>> .cube-input-prepend
            height 30px;
            padding-left 10px;
            color #999;

        >>> input.cube-input-field
            height 30px;
            color #1C1D1D;
            font-size 14px;

            &::-webkit-input-placeholder
                color #999;
                font-size 12px;

    .search-complete
        color #fff;
        width 58px;
        height 30px;
        text-align center;
        line-height 28px !important;
        border 1px solid rgba(255, 255, 255, .4);
        border-radius 32px;
        margin-top 7px;

    .search-wrap
        height 100vh;
        padding calc(44px + env(safe-area-inset-top)) 0 0 0;

        >>> .cube-scroll-nav-bar
            background #f8f8f8;

        >>> .cube-scroll-nav-bar-item
            width 100px;
            line-height 30px;
            padding 10px 7px;
            color #666;

        >>> .cube-scroll-nav-bar-item_active span
            color $theme-common-color;

        >>> .cube-scroll-nav-panel-title
            height 30px;
            background #fff;
            line-height 30px;
            padding 0 10px;
            font-size 12px;
            color #666

    .search-tab-wrap
        padding 10px;
</style>
